<template>
    <div>
        <Card class="ivu-mt" dis-hover :bordered="false">
            <Table highlight-row :columns="columns" :data="logPage" :loading="loading">
                <template slot="status" slot-scope="{row}">
                    <Badge v-if="row.status ===0" status="success" text="成功"></Badge>
                    <Badge v-if="row.status ===1" status="error" text="失败"></Badge>
                </template>
                <template slot="operation" slot-scope="{row}">
                    <a>{{row.operation}}</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="listData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
            </div>
        </Card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            columns: [
                {
                    title: '记录ID',
                    key: 'id'
                },
                {
                    title: '操作人',
                    key: 'person'
                },
                {
                    title: '开始时间',
                    key: 'startTime',
                    width: 165
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    width: 165
                },
                {
                    title: '状态',
                    key: 'status',
                    slot: 'status'
                },
                {
                    title: '模块',
                    key: 'modular'
                },
                {
                    title: '已处理记录',
                    key: 'processed'
                },
                {
                    title: '已失败记录',
                    key: 'fail'
                },
                {
                    title: '操作',
                    key: 'operation',
                    slot: 'operation'
                }
            ],
            list: [],
            current: 1,
            size: 10,
            loading: false
        }
    },
    computed: {
        listData() {
            let data = [...this.list]
            return data
        },
        logPage() {
            const data = this.listData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockOneData() {
            const item = {}
            item.id = '100001'
            item.person = '张雨'
            item.startTime = '16/06/2020 17:31:39'
            item.endTime = '16/06/2020 17:31:40'
            item.status = Math.floor(Math.random() * 2)
            item.modular = '患者'
            item.processed = '1658'
            item.fail = '3'
            item.operation = '下载'
            return item
        },
        getData() {
            this.current = 1
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 100; i++) {
                    data.push(this.mockOneData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        }
    },
    mounted() {
        this.getData()
    }
}
</script>
